<mat-card class="card">
  <mat-card-content class="card-content">
    <div class="header">
      <h3>{{ 'Memory' | translate }}</h3>

      <button
        mat-icon-button
        ixTest="memory-go-to-reports"
        matTooltipPosition="above"
        [attr.aria-label]="'Memory Reports' | translate"
        [matTooltip]="'Memory Reports' | translate"
        [routerLink]="['/reportsdashboard', 'memory']"
      >
        <ix-icon name="insert_chart"></ix-icon>
      </button>
    </div>

    <div [class]="['container', size()]">
      <div class="stats">
        <h2 class="total-memory">
          @if (isLoading()) {
            <ngx-skeleton-loader
              class="skeleton"
              [theme]="{ height: 42, background: 'var(--alt-bg2)', opacity: 0.25 }"
            ></ngx-skeleton-loader>
          } @else {
            {{ formatUnit(memory().physical_memory_total) }}
            <span class="units">GiB</span>
          }
        </h2>
        <div class="memory-used-caption">
          {{ 'total available' | translate }}
          @if (ecc$ | async) {
            <span>(ECC)</span>
          }
        </div>

        <div class="legend">
          @for (legendItem of stats(); track legendItem.name) {
            <div class="stats-item">
              <div
                class="legend-swatch"
                [style.background-color]="legendItem.color"
              ></div>
              <span class="label">{{ legendItem.name }}:</span>
              @if (isLoading()) {
                <ngx-skeleton-loader class="skeleton"></ngx-skeleton-loader>
              } @else {
                {{ formatUnit(legendItem.value) }} GiB
              }
            </div>
          }
        </div>
      </div>

      <div class="chart">
        @if (isLoading()) {
          <ngx-skeleton-loader
            class="skeleton"
            appearance="circle"
            [theme]="{ width: '100%', height: 'auto', 'aspect-ratio': '1', background: 'var(--alt-bg2)', opacity: 0.25 }"
          ></ngx-skeleton-loader>
        } @else {
          <canvas
            baseChart
            type="doughnut"
            [data]="chartData()"
            [options]="chartOptions()"
          ></canvas>
        }
        <ng-template #chart>
          <canvas
            baseChart
            type="doughnut"
            [data]="chartData()"
            [options]="chartOptions()"
          ></canvas>
        </ng-template>
      </div>
    </div>
  </mat-card-content>
</mat-card>
